<template>
	<view class="wrapper">
		<u-loading-page :loading="loading"></u-loading-page>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="110">
			<div class="bfff">
				<u-form-item required label="电缆名称" prop="cableNameId" borderBottom ref="item1">
					<uni-data-select v-model="model1.cableNameId" :localdata="cableNamerange"></uni-data-select>
				</u-form-item>
				<!-- <u-form-item label="电缆编号" prop="name" borderBottom ref="item1">
					<u--input placeholder="请输入" v-model="model1.name" border="none" inputAlign="left"></u--input>
					<div class="f32">—</div>
					<u--input placeholder="请输入" v-model="model1.name" border="none" inputAlign="right"></u--input>
				</u-form-item> -->
				<u-form-item required label="图号" prop="goodId" borderBottom ref="item1">

					<uni-data-select v-model="model1.goodId" :localdata="cableNamerange"></uni-data-select>
				</u-form-item>
				<!-- <u-form-item label="电缆状态" prop="name" borderBottom ref="item1">
					<u--input placeholder="制作中" v-model="model1.name" border="none" inputAlign="right"></u--input>
				</u-form-item> -->
			</div>
			<div class="bfff">
				<u-form-item required label="负责人" prop="userName" borderBottom ref="item1">
					<u--input placeholder="制作中" v-model="model1.userName" border="none" inputAlign="right"
						disabled></u--input>
					<!-- <uni-data-select v-model="model1.userId" :localdata="range"></uni-data-select> -->
				</u-form-item>
				<u-form-item required label="负责使用部门" prop="departmentId" borderBottom ref="item1">
					<uni-data-picker v-model="model1.departmentId" placeholder="请选择负责使用部门" popup-title="请选择负责使用部门"
						:localdata="departmentrange" @change="onchange" @nodeclick="onnodeclick" :map="treemap">
					</uni-data-picker>
				</u-form-item>
				<u-form-item required label="复验周期" prop="recheckCycleId" borderBottom ref="item1">
					<uni-data-select v-model="model1.recheckCycleId" :localdata="recheckCyclerange"></uni-data-select>
				</u-form-item>
				<u-form-item required label="寿命周期" prop="lifeSpanId" borderBottom ref="item1">
					<uni-data-select v-model="model1.lifeSpanId" :localdata="lifeSpanrange"></uni-data-select>
				</u-form-item>
			</div>
			<div class="bfff">
				<u-form-item required label="频率" prop="rate" borderBottom ref="item1">
					<uni-data-select v-model="model1.rate" :localdata="raterange"></uni-data-select>
				</u-form-item>
				<u-form-item required label="用途" prop="purpose" borderBottom ref="item1">
					<u--input placeholder="请输入" v-model="model1.purpose" border="none" inputAlign="right"></u--input>
					<!-- <uni-data-select v-model="model1.purpose" :localdata="range"></uni-data-select> -->
				</u-form-item>
				<u-form-item required label="灌内/外" prop="use" borderBottom ref="item1">
					<uni-data-select v-model="model1.use" :localdata="userange"></uni-data-select>
				</u-form-item>
				<u-form-item required label="顺序号" prop="serialNumber" borderBottom ref="item1">
					<u--input placeholder="请输入" v-model="model1.serialNumber" border="none"
						inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item required label="后缀" prop="suffix" borderBottom ref="item1">
					<u--input placeholder="请输入" v-model="model1.suffix" border="none" inputAlign="right"></u--input>
				</u-form-item>
			</div>
			<div class="bfff bottom f32">
				<div class="space-between mb30">
					<div class="">电连接器</div>
					<u-icon name="plus" color="#666" size="20" @click="addData"></u-icon>
				</div>
				<div class="center tag" v-for="(v,i) in data" :key="i">
					<div class="flex1">{{v.name}}剩余插拔次数</div>
					<u--input placeholder="请输入" v-model="v.count" border="none" inputAlign="right"></u--input>
				</div>
			</div>
			<u-button @click="submit" type="primary" text="保存" class="submit-btn"></u-button>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				goodrange: getApp().globalData.good,
				lifeSpanrange: getApp().globalData.lifeSpan,
				departmentrange: getApp().globalData.department,
				recheckCyclerange: getApp().globalData.recheckCycle,
				cableNamerange: getApp().globalData.cableName,
				userange: getApp().globalData.use,
				raterange: getApp().globalData.rate,
				userange: getApp().globalData.use,
				model1: {},
				data: [],
				rules: {
					'cableNameId': {
						type: 'any',
						required: true,
						message: '请填写电缆名称',
						trigger: ['blur', 'change']
					},
					'goodId': {
						type: 'any',
						required: true,
						message: '请选择图号',
						trigger: ['blur', 'change']
					},
					'userId': {
						type: 'any',
						required: true,
						message: '请选择负责人',
						trigger: ['blur', 'change']
					},
					'departmentId': {
						type: 'any',
						required: true,
						message: '请选择负责使用部门',
						trigger: ['blur', 'change']
					},
					'recheckCycleId': {
						type: 'any',
						required: true,
						message: '请选择复验周期',
						trigger: ['blur', 'change']
					},
					'lifeSpanId': {
						type: 'string',
						required: true,
						message: '请选择寿命周期',
						trigger: ['blur', 'change']
					},
					'rate': {
						type: 'string',
						required: true,
						message: '请选择频率',
						trigger: ['blur', 'change']
					},
					'purpose': {
						type: 'string',
						required: true,
						message: '请选择用途',
						trigger: ['blur', 'change']
					},
					'use': {
						type: 'string',
						required: true,
						message: '请选择灌内/外',
						trigger: ['blur', 'change']
					},
					'serialNumber': {
						type: 'string',
						required: true,
						message: '请选择顺序号',
						trigger: ['blur', 'change']
					},
					'suffix': {
						type: 'string',
						required: true,
						message: '请选择后缀',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onShow() {
			this.model1.userId = uni.getStorageSync('uinfo').id
			this.model1.userName = uni.getStorageSync('uinfo').userName
		},
		methods: {
			// 提交
			submit() {
				console.log(this.model1)
				this.$refs.uForm.validate().then(res => {
					// 判断是否有没填的连接器
					let boo = false
					this.data.forEach(d => {
						if (d.count == '') {
							boo = true
						}
					})
					if (boo) {
						this.sToast('请输入电连接器的数量')
						return
					}
					this.loading = true
					let params = this.copy(this.model1)
					delete params.userName
					let url = '/api/editCable?' + Object.keys(params).map(i =>
						`${i}=${encodeURIComponent(params[i]||'')}`).join('&')
					this.$http(url, this.data).then(
						r => {
							this.loading = false
							this.sToast('创建成功')
							this.back(1,1000)
						}).catch(e => {
						this.loading = false
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 添加电连接器
			addData() {
				this.data.push({
					name: '电连接器' + (this.data.length + 1),
					count: ''
				})
			}
		}
	}
</script>

<style lang="scss">
	.tag {
		height: 100rpx;
		background: #F5F7FB;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 16rpx;
		white-space: nowrap;

		.u-input {
			flex: none;
			width: 200rpx;
		}
	}

	:deep(.u-button--info) {
		height: 72rpx;
		background: #F5F5F5;
		border: 0;
	}

	:deep(.u-button--plain.u-button--primary) {
		height: 72rpx;
		background: rgba(64, 140, 255, 0.1);
	}

	:deep(.u-button) {
		margin-right: 28rpx;
	}

	.bfff {
		padding: 0 32rpx;
		margin-top: 24rpx;
	}

	.bottom {
		padding: 32rpx;
	}
</style>